@import 'nib'

.attachments-galery
    display: flex;
    margin: 0 0 0 30px;
    flex-wrap: wrap;
  .attachment-item
    margin: 10px 1% 0;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;

    &:hover
      background: rgba(9,30,66,.04);

    &.add-attachment
      display: flex
      align-items: center

      a
        display: block
        margin: auto

    .attachment-thumbnail
      width: 112px;
      background-position: 50%;
      background-size: contain;
      background-color: rgba(9,30,66,.04);
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .attachment-thumbnail-img
        max-height: 100%
        max-width: 100%

      .attachment-thumbnail-ext
        text-transform: uppercase
        font-size: 1.6em

    .attachment-details
      font-size: 12px
      margin: 3px
      font-size: 14px
      line-height: 27px;
      padding-left: 15px;
      .attachment-thumbnail-name
        font-weight: 700;
        word-wrap: break-word;
        color: #172b4d;
        font-size: 14px
      .attachment-thumbnail-time
        display: block;
        color: #787878;
      .attachment-details-actions
        display: flex;
        a
          display: block;
          margin-right: 20px;
.attachment-image-preview
  max-width: 100px
  display: block
  box-shadow: 0 1px 2px rgba(0,0,0,.2)

.preview-large-image
  max-width: 1000px
  display: block
  box-shadow: 0 1px 2px rgba(0,0,0,.2)

.preview-clipboard-image
  width: 280px
  max-width: 100%;
  height: 200px
  display: block
  border: 1px solid black
  box-shadow: 0 1px 2px rgba(0,0,0,.2)
.add-attachment-c
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  box-sizing: border-box;
  -o-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  padding: 6px 12px;
  text-decoration: none;
  background-color: rgba(9,30,66,0.04);
  margin: 10px;
  &:hover
    background-color: rgba(9,30,66,0.08);

@media screen and (max-width: 800px)
  .add-attachment-c
    margin: 10px 5px;

// @media screen and (max-width: 800px)
//   .attachments-galery
//     flex-direction
//       row
//     .attachment-item
//       width: 50% - 2%

//       .attachment-thumbnail
//         height: 130px
//       .attachment-details
//         font-size: 1.1em

// @media screen and (max-width: 360px)
//   .attachments-galery
//     .attachment-item
//       width: 100%

//       .attachment-thumbnail
//         height: 200px
